<template>
	<view
		style="flex: 1;display: flex;flex-direction: column;">
		<base_navbar>
			<image @click="backHandle" src="/static/back.png" style="width: 30px;height: 30px;" mode=""></image>
		</base_navbar>
		<view style="flex: 1;display: flex;flex-direction: column;padding-left: 12px;padding-right: 12px;">
			<view
				style="display: flex;justify-content: space-between;align-items: center;padding-top: 12px;padding-bottom: 12px;">
				<text style="font-size: 32px;">研发部</text>
				<text @click="delHandle" style="color: red;">删除</text>
			</view>
			<view style="flex: 1;background-color: #f5f5f5;overflow-y: auto;height: 0;padding-bottom: 40px;">
				<!-- 分组列表 -->
				<view style="margin-top: 12px;" @click="groupCellClickHandle" v-for="(n,i) in 3" :key="n">
					<group_cell />
				</view>
				<!-- 用户列表 -->
				<view style="margin-top: 12px;" @click="memberCellClickHandle" v-for="(n,i) in 3" :key="n">
					<member_cell />
				</view>
			</view>
			<view style="height: 12px;"></view>
			<!-- 添加按钮  -->
			<view @click="addHandle" style="padding: 16px;
			display: flex;justify-content: space-between;
			background-color: #ffffff;
			align-items: center;
			justify-content: center;
			margin-left: 12px;
			margin-right: 12px;
			box-shadow: 1px 3px 10px #ebebeb;
			margin-bottom: 30px;
			border-radius: 8px;
			background-color: #1677FF;
			">
			<text style="color: #ffffff;">添加子部门</text>
		</view>
		</view>
		<!--  -->
		<add_pop v-if="show_add_pop" @closeHandle="show_add_pop=false;"
			@createHandle="createHandle"
		 v-model="name"/>
	</view>
</template>

<script>
	import group_cell from "./group_cell.vue"
	import member_cell from "./member_cell.vue"
	import add_pop from "./add_pop.vue"
	export default {
		components: {
			group_cell,
			member_cell,
			add_pop
		},
		data() {
			return {
				show_add_pop:false,
				name:"",
			}
		},
		methods: {
			backHandle(){
				uni.navigateBack();
			},
			addHandle() {
				this.show_add_pop = true;
			},
			createHandle(){
				this.show_add_pop = false;
				alert(this.name)
			},
			delHandle(){
				uni.showModal({
					title: '提示',
					content: '确定删除该部门？',
					confirmText:"删除",
					confirmColor:'#ff0000',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	}
</script>

<style>

</style>